<!DOCTYPE html>
<html>

<head>
	<meta charset="utf8" />
	<title>注册</title>
	<link rel="stylesheet" href="{{ url_for('static', filename='/bootstrap-5.1.3-dist/css/bootstrap.min.css') }}">
	<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/index.css') }}" />
	<script src="{{ url_for('static', filename='js/jQuery.js') }}"></script>
</head>

<body>

	<img class="bgone" src="{{ url_for('static', filename='img/background.jpg') }}" />
	<img class="pic" src="{{ url_for('static', filename='img/a.png') }}" />

	<div  class="mytable" >
		<div class="wel">图书管理系统</div>
		<div class="wel1">Library management system</div>
		<div class="user" style="top: 5rem;">
			<div id="yonghu"><img src="{{ url_for('static', filename='img/yhm.png') }}" /></div>
			<input type="text" id="username" name="username" placeholder="用户名" />
			<div id="username_msg" style="position: absolute;right: 0;bottom: -1.2rem;"></div>
		</div>
		<div class="password" style="top: 10rem;">
			<div id="yonghu"><img src="{{ url_for('static', filename='img/mm.png') }}" /></div>
			<input type="password" id="password" name="password" placeholder="密码" />
			<div id="password_msg" style="position: absolute;right: 0;bottom: -1.2rem;"></div>
		</div>
		<div class="password" style="top: 15rem;">
			<div id="yonghu"><img src="{{ url_for('static', filename='img/mm.png') }}" /></div>
			<input type="password" id="repassword" name="password" placeholder="重复密码" />
			<div id="repassword_msg" style="position: absolute;right: 0;bottom: -1.2rem;"></div>
		</div>
		<input class="mybtn"  style="top: 21rem;" type="button" value="注册" />
		<div class="login" style="top: 25rem;">点击返回<a href="/">登录</a>界面</div>

	</div>

	<div class="modal fade" id="fail" aria-labelledby="mt" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="mt"></h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body">

				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-primary" data-bs-dismiss="modal">关闭</button>
				</div>
			</div>
		</div>
	</div>
	<script src="{{ url_for('static', filename='js/登录注册.js') }}"></script>
	<script src="{{ url_for('static', filename='/bootstrap-5.1.3-dist/js/bootstrap.js') }}"></script>
	<script>

		var fail = new bootstrap.Modal(document.getElementById('fail'));
		var mt = $("#mt");
		var mb = $(".modal-body");

		// mt.html("登录失败");
		// mb.html("请检查用户名或密码是否正确");
		// fail.show()
		$(".mybtn").click(function (e){
			var username=$("#username").val();
			var password=$("#password").val();

			if(checkForm()){
				console.log(username)
				$.post("{{url_for('auth.register')}}",{'username': username,'password':password},
				function (result) {
						if(result=="error"){
							mt.html("注册失败");
							mb.html("用户名已被注册");
							fail.show()
						}
						else{
							window.location.href="{{ url_for('auth.login') }}";
						}
				});
			}
			else{
				e.preventDefault();
			}
		});
	</script>
</body>

</html>